<template>
	<view class="ex-mall-tab-page" :class="[$themeClass('page-bg-color')]">
		<!-- 头部 -->
		<view class="ex-mall-header" :class="[$themeClass('header-bg-color')]">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">【 🚚 预约列表 】</view>
			<!-- #endif -->
      <view class="ex-mall-header-content">
        <view class="ex-mall-header-search">
          <input class="ex-mall-header-search-input" v-model="goodName" :class="[$themeClass('search-input-bg-color'), $themeClass('search-input-color')]" type="text"
                 placeholder="搜索预约..." :placeholder-class="$themeClass('search-input-placeholder')" />
          <view class="ex-mall-header-search-btn" @click="search" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">
            <view class="ex-mall-header-search-btn-icon ri-search-line"></view>
          </view>
        </view>
      </view>
		</view>


		<!-- 预约列表 -->
		<view class="ex-mall-panel list" :class="[$themeClass('panel-bg-color')]">
			<view class="ex-mall-panel-title" :class="[$themeClass('panel-title-bg-color'), $themeClass('panel-title-color')]">
				<view class="text">预约列表</view>
			</view>
			<view class="ex-mall-panel-content" :class="[$themeClass('panel-content-bg-color')]">
        <view class="content">
          <view class="list">
            <view class="item" :class="[$themeClass('list-item-bg-color')]" v-for="(order, xi) in orders" :key="xi" @click="$util.toLinkPage('/pages/order/result?id='+order.id)">
              <view class="left">
                <view class="title">编号: {{ order.code }}</view>
                <view class="title">金额: ￥ {{ order.totalAmount }}</view>
                <view class="title">时间: {{ order.createTime }}</view>
                <view class="title">状态: {{ order.shipStatusName }}</view>
              </view>
              <view class="right">
                <view class="arrow">
                  <text class="icon ri-arrow-right-s-line"></text>
                </view>
              </view>
            </view>
          </view>
        </view>
			</view>
		</view>

		<view class="loadmore" :class="[$themeClass('panel-content-bg-color'), $themeClass('panel-title-color')]">
			<view class="text" v-if="loadMoreState === 'loadmore'">上拉加载更多</view>
			<view class="text" v-else-if="loadMoreState === 'loading'">正在加载...</view>
			<view class="text" v-else-if="loadMoreState === 'nomore'">没有更多了</view>
		</view>
	</view>
</template>

<script>
  import { list } from "../../api/order";

	let systemInfo = {}
	export default {
		data() {
			return {
				reachBottom: false,
				loadMoreState: 'loadmore',
				specials: [],
				/* 推荐 */
        orders: [],
        page: {
          pageSize: 5,
          currentPage: 1,
          total: 0
        },
        goodName: ''
			}
		},
		mounted() {
			this.load()
			this.$emit('loaded', {
				name: 'index'
			})
		},
		methods: {
      search() {
        this.orders = []
        this.page.currentPage = 1
        this.page.pageSize = 5

        const params = {}
        if (this.goodName && this.goodName !== '') {
          params.goodName = this.goodName
        }
        this.loadList(this.page, params)
      },
			load() {
				console.log('index on load')
				systemInfo = uni.getSystemInfoSync()

        this.orders = []
				this.loadList(this.page)
			},
			show() {
				console.log('index on show')
			},
			hide() {
				console.log('index on hide')
			},
			loadList(page, params = {}) {
				this.loadMoreState = 'loading'

        list(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data;
          this.page.total = data.total;
          data.records.forEach(item => {
            this.orders.push(item)
          })

          if (this.orders.length >= this.page.total) {
            this.loadMoreState = 'nomore'
            return
          }
          this.loadMoreState = 'loadmore'
        });
			},
			scroll(e) {
				uni.createSelectorQuery().in(this).selectAll('.ex-mall-tab-page').boundingClientRect(rects => {
					var rect = rects[0]
					// console.log(rect.bottom, systemInfo.windowHeight)
					if (rect.bottom - systemInfo.windowHeight <= 50) {
						if (!this.reachBottom) {
							this.reachBottom = true
							this.loadMore()
						}
					} else {
						this.reachBottom = false
					}
				}).exec()
			},
			loadMore() {
				console.log('index load more')
				if (this.loadMoreState === 'loadmore') {
          this.page.currentPage++;
					this.loadList(this.page)
				}
			},
			toSearch() {
				this.$switchTab('search')
			},
			toFavorite() {
				uni.navigateTo({
					url: '/pages/favorite/favorite'
				})
			}
		}
	}
</script>

<style lang="scss">
	.carousel {
		width: 100%;
		height: 48vw;
		margin: 0 auto;
		padding-top: 12px;

		&>.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				padding: 0 28px;
				box-sizing: border-box;

				&:nth-child(3n-2) {
					.carousel-item {
						&>.img {
							background-color: #ffffff;
						}
					}
				}

				&:nth-child(3n-1) {
					.carousel-item {
						&>.img {
							background-color: #9B927D;
						}
					}
				}

				&:nth-child(3n) {
					.carousel-item {
						&>.img {
							background-color: #96824C;
						}
					}
				}
			}

			.carousel-item {
				position: relative;
				width: 100%;
				height: 100%;
				border-radius: 12px;
				overflow: hidden;

				&>.img {
					display: block;
					width: 100%;
					height: 100%;
				}

				&>.show {
					position: absolute;
					right: 20px;
					bottom: 30px;
					left: 20px;
					display: flex;

					&>.word {
						flex: 1;

						&>.w1 {
							font-size: 16px;
							font-weight: 500;
							color: #FFFFFF;
						}

						&>.w2 {
							margin-top: 10px;
							font-size: 14px;
							color: #FFFFFF;
						}
					}

					&>.enter {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 38px;
						height: 38px;
						background-color: #FFFFFF;
						border-radius: 12px;

						&>.icon {
							font-size: 22px;
							color: #292929;
						}
					}
				}
			}
		}
	}

	.ex-mall-panel.column {
		padding-top: 32px;

		.ex-mall-panel-content {
			.column-list {
				display: flex;
				align-items: flex-start;

				&>.item {
					padding: 0 16px 24px 0;

					&:first-child {
						padding-left: 28px;
					}

					&:last-child {
						padding-right: 28px;
					}

					&:nth-child(odd) {
						&>.thumbnail {
							&>.img {
								background-color: #0EAA90;
							}
						}
					}

					&:nth-child(even) {
						&>.thumbnail {
							&>.img {
								background-color: #F8E3DC;
							}
						}
					}

					&>.thumbnail {
						position: relative;

						&>.img {
							position: relative;
							z-index: 1;
							display: block;
							// width: 188px;
							// height: 218px;
							width: 154px;
							height: 200px;
							border-radius: 12px;
						}

						&>.btn {
							position: absolute;
							top: 14px;
							right: 14px;
							z-index: 10;
							display: flex;
							justify-content: center;
							align-items: center;
							width: 28px;
							height: 28px;
							border-radius: 9px;
							background-color: #FFFFFF;

							&.favorite {
								&>.icon {
									font-size: 15px;
									color: #292929;
								}
							}
						}
					}

					&>.info {
						line-height: 1;

						&>.title {
							margin-top: 20px;
							line-height: 1.3;
							font-size: 15px;
							font-weight: 600;
						}

						&>.price {
							margin-top: 10px;
							font-size: 13px;
						}
					}
				}
			}
		}
	}

	.special {
		padding: 28px;

		&>.item {
			position: relative;
			width: calc(100vw - (28px * 2));
			height: calc(100vw - (28px * 2));
			margin-top: 28px;

			&:first-child {
				margin-top: 0;
			}

			&:nth-child(3n-2) {
				&>.thumbnail {
					&>.img {
						background-color: #98847D;
					}
				}
			}

			&:nth-child(3n-1) {
				&>.thumbnail {
					&>.img {
						background-color: #A06441;
					}
				}
			}

			&:nth-child(3n) {
				&>.thumbnail {
					&>.img {
						background-color: #645E66;
					}
				}
			}

			&>.thumbnail {
				width: 100%;
				height: 100%;

				&>.img {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 12px;
				}
			}

			&>.word {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;

				&>.title {
					font-size: 29px;
					font-weight: 700;
					color: #FFFFFF;
				}

				&>.info {
					margin-top: 12px;
					font-size: 14px;
					color: #FFFFFF;
				}
			}

			&>.btn {
				position: absolute;
				bottom: 38px;
				left: 50%;
				transform: translateX(-50%);
				width: 146px;
				height: 58px;
				text-align: center;
				line-height: 58px;
				font-size: 14px;
				font-weight: 500;
				color: #292929;
				background-color: #FFFFFF;
				border-radius: 12px;
			}
		}
	}

	.ex-mall-panel.list {
		.ex-mall-panel-content {
      &>.content {
        &>.list {
          padding: 0 28px;

          &>.item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 104px;
            margin-top: 18px;
            padding: 0 24px;
            // background-color: #FFFFFF;
            border-radius: 12px;

            &>.left {
              align-items: center;

              &>.icon-box {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 38px;
                height: 48px;
                border-radius: 12px;

                &>.icon {
                  font-size: 18px;
                  color: #FFFFFF;
                }
              }

              &>.title {
                margin-left: 18px;
                font-size: 14px;
                font-weight: 600;
                color: #292929;
              }
            }

            &:nth-child(3n-2) {
              &>.left {
                &>.icon-box {
                  background-color: #FFC592;
                }
              }
            }

            &:nth-child(3n-1) {
              &>.left {
                &>.icon-box {
                  background-color: #F76842;
                }
              }
            }

            &:nth-child(3n) {
              &>.left {
                &>.icon-box {
                  background-color: #61DAD5;
                }
              }
            }

            &>.right {
              display: flex;
              align-items: center;

              &>.arrow {
                display: flex;
                align-items: center;

                &>.icon {
                  font-size: 18px;
                  font-weight: 600;
                  color: #9093A2;
                }
              }
            }
          }
        }
      }
		}
	}

	.loadmore {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 78px;

		&>.text {
			font-size: 14px;
			font-weight: 600;
		}
	}
</style>
